<template>
    <div class="flex-center login" v-loading="loading">
        <div class="flex loginContent">
            <div class="left">
                <img
                    src="https://image.lingyiliebian.com/images/frontend/1645520235944/img/login/middle.png"
                />
            </div>
            <div class="right">
                <div class="title">登录</div>
                <el-form
                    ref="loginForm"
                    label-position="left"
                    :model="loginForm"
                    :rules="rules"
                    :hide-required-asterisk="false"
                >
                    <el-form-item
                        label="用户名"
                        label-width="70px"
                        prop="username"
                    >
                        <el-input
                            v-model.trim="loginForm.username"
                            placeholder="请输入用户名"
                            :autofocus="true"
                            @keyup.native.13="$refs.password.focus"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        label="密码"
                        label-width="70px"
                        prop="password"
                    >
                        <el-input
                            v-model.trim="loginForm.password"
                            ref="password"
                            type="password"
                            placeholder="请输入密码"
                            @keyup.native.13="onSubmit"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn" type="primary" @click="onSubmit">
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
            loginForm: {
                username: "",
                password: "",
            },
            rules: {
                username: [
                    {
                        message: "请输入用户名",
                        required: true,
                    },
                ],
                password: [
                    {
                        message: "请输入密码",
                        required: true,
                    },
                ],
            },
            loading: false, // 请求中
        };
    },
    methods: {
        onSubmit() {
            this.$refs.loginForm.validate((valid) => {
                if (!valid) {
                    return;
                }
                this.loading = true;
                this.$axios
                    .post("login", this.loginForm)
                    .then((res) => {
                        localStorage.setItem("token", res.token);
                        localStorage.setItem("nickname", res.username);
                        this.loading = false;
                        this.$utils.each(this.$roles, (item) => {
                            if (item.id == res.role) {
                                // 目前一个用户只有一个身份
                                localStorage.setItem(
                                    "roles",
                                    JSON.stringify([item.name])
                                ); // 保存一个数组字符串
                                return false;
                            }
                        });
                        this.replaceRoute();
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            });
        },
        // 添加路由，重定向到首页
        replaceRoute() {
            let roles = localStorage.getItem("roles");
            roles = roles ? JSON.parse(roles) : [];
            this.$store.dispatch("GenerateRoutes", { roles }).then(() => {
                const { addRouters } = this.$store.state,
                    path = addRouters[0].children[0].path;
                this.$utils.each(addRouters, (item) => {
                    this.$router.addRoute(item);
                });
                this.$router.replace(path);
            });
        },
    },
};
</script>

<style lang="less" scoped>
@import url("~@assets/css/public.less");
.login {
    position: relative;
    min-width: 1100px;
    min-height: 600px;
    width: 100%;
    height: 100%;
    background-image: url("https://image.lingyiliebian.com/images/frontend/1645520235944/img/login/bg.png");
    background-size: cover;
    .loginContent {
        height: 530px;
        width: 1000px;
        .left {
            flex: 1;
            padding-top: 60px;
            height: 100%;
            background-color: #404a5e;
            box-shadow: 0 12px 34px 0 rgba(6, 9, 16, 0.6);
            border-radius: 8px 0 0 8px;
            img {
                display: block;
                margin: 0 auto;
                width: 504px;
                height: 422px;
            }
        }
        .right {
            margin-left: -10px;
            padding: 120px 60px 0;
            width: 370px;
            height: 100%;
            text-align: center;
            background-color: #fff;
            box-shadow: 0 12px 34px 0 rgba(6, 9, 16, 0.6);
            border-radius: 8px;
            .title {
                margin-bottom: 30px;
                line-height: 45px;
                font-size: 32px;
                font-weight: 400;
                color: @grey;
            }
            .btn {
                margin-top: 20px;
                padding: 0;
                width: 100%;
                line-height: 50px;
                font-size: 20px;
                border-radius: 26px;
            }
            ::v-deep .el-form-item {
                border-bottom: 1px solid #f2f2f2;
                &:last-child {
                    border-bottom: 0;
                }
                .el-input__inner {
                    border: none;
                }
            }
        }
    }
}
</style>
